<!-- 将三级分类表单注册为全局组件 -->
<template>
  <div>
    <el-card class="box-card" style="margin: 20px 0">
      <!-- inline 属性为 true 可以让表单域变为行内的表单域（在一行内放置表单） -->
      <el-form inline="true">
        <el-form-item label="一级分类" style="width: 30%">
          <!--select标签的自带方法 change：	选中值发生变化时触发	val，目前的选中值 -->
          <el-select
            placeholder="请选择"
            v-model="categoryStore.c1Id"
            @change="handler"
          >
            <!-- option label为显示的文字内容。 value是下拉框select收集的数据 这里是选中项的id -->
            <el-option
              v-for="(c1, index) in categoryStore.c1Arr"
              :key="c1.id"
              :label="c1.name"
              :value="c1.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" style="width: 30%">
          <el-select
            placeholder="请选择"
            v-model="categoryStore.c2Id"
            @change="handlerc2"
          >
            <el-option
              v-for="(c2, index) in categoryStore.c2Arr"
              :key="c2.id"
              :label="c2.name"
              :value="c2.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类" style="width: 30%">
          <el-select placeholder="请选择">
            <el-option
              v-for="(c3, index) in categoryStore.c3Arr"
              :key="c3.id"
              :label="c3.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
// 将所有的分类接口数据获取全都写在仓库里
import useCategoryStore from '@/store/modules/category' //引入分类仓库
let categoryStore = useCategoryStore()
// 接收小仓库里 获取一级分类的方法
let getC1 = () => {
  categoryStore.getC1Store()
}
// 接收小仓库里 获取二级分类的方法
// 当一级分类的所选值发生变化时 触发的事件回调  就是可以拿到二级分类的内容
const handler = () => {
  // 需要将二三级的id数据清空  以及三级的数据也要清空 因为不知道你选的是二级的哪一个
  categoryStore.c2Id = ''
  categoryStore.c3Id = ''
  categoryStore.c3Arr = []
  categoryStore.getC2Store()
}
// 当二级分类的所选值发生变化时 触发的事件回调  就是可以拿到三级分类的内容
const handlerc2 = () => {
  // 二级再一次改变时 三级的就要清空
  categoryStore.c3Id = ''
  categoryStore.getC3Store()
}
// 在页面挂载的时候就获取分类数据
onMounted(() => {
  getC1()
})
</script>

<style scoped lang="scss"></style>
